<template>
    <div id="cesiumContainer"></div>
</template>

<script>

    export default {
        name: 'CustomGeometry',
        data() {
            return {}
        },
        mounted() {
            this.initCesium();
            this.addCustomGeometry();
        },
        methods: {
            initCesium: function () {
                this.viewer = new Cesium.Viewer('cesiumContainer', {
                    animation: false,
                    baseLayerPicker: false,
                    fullscreenButton: false,
                    geocoder: false,
                    homeButton: false,
                    infoBox: true,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    scene3DOnly: true,
                    timeline: false,
                    selectionIndicator: false,//是否显示选取指示器组件
                    shouldAnimate: false,     //自动播放动画控件
                    shadows: true,//是否显示光照投射的阴影
                    terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
                    sceneMode: Cesium.SceneMode.SCENE3D,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi"
                    })
                });
                this.viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
            },
            addCustomGeometry() {

                //顶点坐标
                let cartesian3s = Cesium.Cartesian3.fromDegreesArray([
                    108.017578125,
                    36.26199220445664,
                    113.15917968749999,
                    36.26199220445664,
                    113.15917968749999,
                    38.41055825094609,
                    108.017578125,
                    38.41055825094609
                ]);
                console.log(cartesian3s)

                let arr = []
                //将坐标所有的x,y,z分量的值取出
                for (const cartesian3 of cartesian3s) {
                    arr.push(cartesian3.x);
                    arr.push(cartesian3.y);
                    arr.push(cartesian3.z);
                }
                //构建一个float类型的数组
                let float64Array = new Float64Array(arr);
                console.log(float64Array)
                //定一个float类型的坐标数组
                const positions = new Float64Array([
                    0.0, 0.0, 0.0,
                    7500000.0, 0.0, 0.0,
                    0.0, 7500000.0, 0.0
                ]);

                //定义geometry
                const geometry = new Cesium.Geometry({
                    attributes: {
                        //定义坐标
                        position: new Cesium.GeometryAttribute({
                            componentDatatype: Cesium.ComponentDatatype.DOUBLE,//定义数据的类型
                            componentsPerAttribute: 3,//坐标由几个分量构成
                            //values:positions//坐标的值
                            values: float64Array
                        })
                    },
                    //indices: new Uint16Array([0, 1, 2]),//坐标的索引
                    indices: new Uint16Array([0, 1, 2,0,2,3]),
                    primitiveType: Cesium.PrimitiveType.TRIANGLE_STRIP,//图元的绘制方式
                    boundingSphere: Cesium.BoundingSphere.fromVertices(positions)//包裹球
                });

                //构建geometry实例
                let geometryInstance = new Cesium.GeometryInstance({
                    geometry: geometry,
                    // modelMatrix : Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
                    //     Cesium.Cartesian3.fromDegrees(115.59777, 40.03883)), new Cesium.Cartesian3(0.0, 0.0, 100.0), new Cesium.Matrix4()),
                    attributes: { //定义颜色属性
                        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.YELLOWGREEN)
                    },
                    id: 'CustomGeometry'
                });
                //构建图元
                let primitive = new Cesium.Primitive({
                    geometryInstances: [geometryInstance],
                    asynchronous: false,//是否采用多线程
                    appearance: new Cesium.PerInstanceColorAppearance({
                        translucent: false,//半透明
                        flat: true//当 true 时，片段着色器中将使用平面阴影，这意味着不考虑光照
                    })
                });
                //添加到场景中
                this.viewer.scene.primitives.add(primitive);

            }
        }

    }
</script>

